<template>
  <div class="employee-apply">
    <el-tabs type="card" v-model="status" @tab-click="searchData()">
      <!--申请列表-->
      <el-tab-pane :name="EMPLOYEE_STATUS.APPLYING.val">
        <span slot="label">
          <i class="fa fa-user-plus"></i> 申请列表
        </span>
        <el-form :inline="true" size="mini" style="margin-left: 10px" class="search-form">
          <!-- <el-form-item label="姓名">
            <el-input v-model="search.name"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="search.loginName"></el-input>
          </el-form-item>
          <el-form-item label="申请日期">
            <el-date-picker
              v-model="search.timeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" class="el-icon-refresh" @click="searchData()">刷新</el-button>
          </el-form-item>
        </el-form>
        <el-table size="mini" :data="applyList" height="500">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="phone" label="联系方式"></el-table-column>
          <el-table-column prop="locationsStr" label="服务区域"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a class="t-link" @click="toAudit(scope)">去审核</a>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 拒绝列表 -->
      <el-tab-pane :name="EMPLOYEE_STATUS.REJECT.val">
        <span slot="label">
          <i class="fa fa-user-times"></i> 拒绝列表
        </span>
        <el-form :inline="true" size="mini" style="margin-left: 10px" class="search-form">
          <el-form-item label="姓名">
            <el-input v-model="search.name"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="search.loginName"></el-input>
          </el-form-item>
          <el-form-item label="申请日期">
            <el-date-picker
              v-model="search.timeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <el-table size="mini" :data="applyList" height="500">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="phone" label="联系方式"></el-table-column>
          <el-table-column prop="locationsStr" label="服务区域"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div class="paging-block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="auditDialogVisible" width="70%" top="5vh">
      <employ-audit></employ-audit>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectAudit()">拒绝申请</el-button>
        <el-button type="primary" @click="passAudit()">通过申请</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  EMPLOYEE_STATUS,
  DEFAULT_AUDIT_PASS_REMARK,
  DEFAULT_AUDIT_REFUSE_REMARK
} from "@/config/config";
import { mapActions, mapState } from "vuex";
import employAudit from "./employ_audit";
import * as employeeApi from "@/api/employee_manage";

export default {
  name: "employee_apply",
  components: { employAudit },
  data() {
    return {
      EMPLOYEE_STATUS: EMPLOYEE_STATUS,
      auditDialogVisible: false,
      status: EMPLOYEE_STATUS.APPLYING.val,
      applyList: [],
      search: {
        name: "",
        timeRange: []
      },
      pagination: {
        limit: 15, // 每页显示数据条数
        pageNum: 1, // 当前页
        total: 0 // 数据总条数
      }
    };
  },
  methods: {
    ...mapActions("employeeManage", [
      "searchEmployee",
      "selectEmployee",
      "auditEmployee"
    ]),
    toAudit(scope) {
      this.auditDialogVisible = true;
      this.selectEmployee(scope.row);
    },
    handleCurrentChange(currentPage) {
      this.pagination.pageNum = currentPage;
      this.searchData();
    },
    handleSizeChange(size) {
      this.pagination.limit = size;
      this.searchData();
    },
    searchData() {
      this.searchEmployee({ ...this.pagination, status: this.status }).then(
        data => {
          this.applyList = data.results;
          this.pagination.total = data.total;
        }
      );
    },
    passAudit() {
      employeeApi
        .auditEmployee({
          applyId: this.selectedEmployee.applyId,
          remark: this.tip || DEFAULT_AUDIT_PASS_REMARK,
          status: EMPLOYEE_STATUS.DONE.val
        })
        .then(resp => {
          let data = resp.data;
          this.handleOpSuccess(data);
          this.auditDialogVisible = false;
          this.searchData();
        });
    },
    rejectAudit() {
      employeeApi
        .auditEmployee({
          applyId: this.selectedEmployee.applyId,
          remark: this.tip || DEFAULT_AUDIT_REFUSE_REMARK,
          status: EMPLOYEE_STATUS.REJECT.val
        })
        .then(resp => {
          let data = resp.data;
          this.handleOpSuccess(data);
          this.auditDialogVisible = false;
          this.searchData();
        });
    }
  },
  computed: {
    ...mapState("employeeManage", {
      productCatalogue: state => state.productCatalogue,
      employeeList: state => state.employeeList,
      selectedEmployee: state => state.selected
    })
  },
  created() {
    this.searchData();
  }
};
</script>

<style scoped>
.paging-block {
  text-align: center;
}
</style>
